<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
    </style>
</head>
<body style="background: #01253f">
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-row>
            <el-col :span="14" style="border: 1px solid #00c5cc ;height: 300px;">
                <el-col :span="24">
                    <p align="center" style="font-weight: 900;color: #00c5cc;"><strong>| 当月区域告警统计</strong></p>
                    <div id="myChart" style="height: 250px;width: 90%"></div>
                </el-col>
                <el-col :span="24" style="border: 1px solid #00c5cc ;height: 300px;margin-top: 11px">
                    <p align="center" style="font-weight: 900;color: #00c5cc"><strong>| 当月行业告警统计</strong></p>
                    <div id="myChart2" style="height: 250px;width: 90%"></div>
                </el-col>
            </el-col>




            <el-col :span="10" style="border: 1px solid #00c5cc ;height: 610px;">
                <p align="center" style="font-weight: 900; color:#00c5cc"><strong>| 当月风险告警分类占比</strong></p>
                <div id="percent_chart" style="height: 500px;width: 90%"></div>

            </el-col>
        </el-row>
        <el-row>
        </el-row>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            tableData:[]
        },
        created: function () {
            $('.page').show();
            this.loadData();

        },
        methods: {
            loadData: function () {
                let param = {};
                param.UserId = SiteConfig.account.id;
                param.pageno = 1;
                param.pagesize = 30;
                HttpUtil.get('GovStatistics/getGradeAlarmByBusiness', param).success((res) => {
                    this.type_data = res.data;
                    this.drawTypeChart();

                })
                HttpUtil.get('GovStatistics/getGradeAlarmByZone', param).success((res) => {

                    this.zone_data = res.data;
                    this.drawZoneChart()
                })
            },

            drawZoneChart() {
                let total = {
                    ones:0,
                    twos: 0,
                    threes: 0,
                    fours: 0,
                };
                let chartData = {
                    xdatas: [],
                    ones: [],
                    twos: [],
                    threes: [],
                    fours: [],
                };
                for (let item of this.zone_data) {
                    chartData.xdatas.push(item.zone);
                    chartData.ones.push(item.one);
                    chartData.twos.push(item.two);
                    chartData.threes.push(item.three);
                    chartData.fours.push(item.four);
                    total.ones += item.one;
                    total.twos += item.two;
                    total.threes += item.three;
                    total.fours += item.four;
                }
                let mychart1 = echarts.init(document.getElementById('myChart'));
                let option1 = {
                    color: ["#d73530", "#E6A23C", "#fbbd08", "#0081ff"],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['重大告警', '较大告警', '一般告警', '低告警'],
                        textStyle: {
                            color: '#FFFFFF',
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: chartData.xdatas,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#FFFFFF' //
                                }
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#FFFFFF' //
                                }
                            },
                        }
                    ],
                    series: [
                        {
                            name: '重大告警',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.ones
                        },
                        {
                            name: '较大告警',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.twos
                        },
                        {
                            name: '一般告警',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.threes
                        },
                        {
                            name: '低告警',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.fours
                        },
                    ]
                };
                mychart1.setOption(option1);

                let percent_chart = echarts.init(document.getElementById('percent_chart'));
                let percent_option = {
                    color: ["#d73530", "#E6A23C", "#fbbd08", "#0081ff"],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 'right',
                        top: '40%',
                        data: ['重大告警', '较大告警', '一般告警', '低告警'],
                        textStyle: {
                            color: '#FFFFFF',
                        }
                    },
                    series: [
                        {
                            name: '企业风险级别',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: total.ones, name: '重大告警'},
                                {value: total.twos, name: '较大告警'},
                                {value: total.threes, name: '一般告警'},
                                {value: total.fours, name: '低告警'},
                            ],

                        }
                    ]
                };
                percent_chart.setOption(percent_option);
            },
            drawTypeChart() {
                let chartData = {
                    xdatas: [],
                    ones: [],
                    twos: [],
                    threes: [],
                    fours: [],
                }
                for (let item of this.type_data) {
                    chartData.xdatas.push(item.cname);
                    chartData.ones.push(item.one);
                    chartData.twos.push(item.two);
                    chartData.threes.push(item.three);
                    chartData.fours.push(item.four);
                }
                let mychart2 = echarts.init(document.getElementById('myChart2'));
                let option2 = {
                    color: ["#d73530", "#E6A23C", "#fbbd08", "#0081ff"],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['重大告警', '较大告警', '一般告警', '低告警'],
                        textStyle: {
                            color: '#FFFFFF',
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: chartData.xdatas,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#FFFFFF' //
                                },
                                interval:0,//横轴信息全部显示
                                rotate:-30,//-30度角倾斜显示
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#FFFFFF' //
                                }
                            },
                        }
                    ],
                    series: [


                        {
                            name: '重大告警',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.ones
                        },
                        {
                            name: '较大告警',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.twos
                        },
                        {
                            name: '一般告警',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.threes
                        },
                        {
                            name: '低告警',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.fours
                        },
                    ]
                };
                mychart2.setOption(option2);

            }


        },

        mounted: function () {

        }
    });
</script>
</body>
</html>
